import React, { useEffect,useState } from "react";
import dayjs from "dayjs";
import {
    Form,
    Input,
    InputNumber,
    Radio,
    Modal,
    message,
} from 'antd';
import { getBannerDetail, createBanner, updateBanner } from "./../../api/banner";
import UploadComponent from "./../../components/UploadComponent";
import RangePickerComponent from "./../../components/RangePickerComponent";
import { bannerFormType ,bannerFormReqType} from "../../types/bannerType";


type propsType = {
    isModalOpen: boolean;
    type: 'add' | 'edit';
    bannerId?: number;
    handleCancel: () => void
}

const AddOrEdit = (e: propsType) => {
    const { isModalOpen, type, handleCancel } = e;
    const [form] = Form.useForm();
    const [bannerId,setBannerId] =useState<number>(0)
    const onFinish = (e: bannerFormType) => {
        const obj: bannerFormReqType = {
            ...e,
            coverImgUrl: e.coverImgUrlFile[0].url,
            startTime: e.time?dayjs(e.time[0]).unix():0,
            endTime: e.time?dayjs(e.time[1]).unix():0,
        }
        if (type === "add") {
            createBanner(obj).then(res => {
                if(res.code===0){
                    message.success('创建成功');
                    handleCancel();
                }
            })
        }else{
            updateBanner({...obj,bannerId}).then(res => {
                if(res.code===0){
                    message.success('编辑成功');
                    handleCancel();
                }
            })
        }
    }
    const handBannerDetail = (e: number) => {
        getBannerDetail({ bannerId: e }).then(res => {
            if (res.code === 0) {
                form.setFieldsValue({
                    ...res.data,
                    coverImgUrlFile:[{ url: res.data.coverImgUrl, type: 'image/png' }],
                    time: [res.data.startTime,res.data.endTime]
                });
                setBannerId(e);
            }
        })
    }
    useEffect(() => {
        form.resetFields();
        if (e.isModalOpen && e.bannerId && e.type==='edit') {
            handBannerDetail(e.bannerId)
        }
    }, [e.isModalOpen])
    return (
        <>
            <Modal title={type === "add" ? "创建" : "编辑"} open={isModalOpen} onOk={form.submit} onCancel={handleCancel}>
                <Form
                    labelCol={{ span: 4 }}
                    wrapperCol={{ span: 20 }}
                    layout="horizontal"
                    onFinish={onFinish}
                    form={form}
                    style={{ maxWidth: 600 }}
                >
                    <Form.Item<bannerFormType> name={"title"} label="标题">
                        <Input />
                    </Form.Item>
                    <Form.Item<bannerFormType> label="封面图" name={"coverImgUrlFile"}>
                        <UploadComponent limit={1} />
                    </Form.Item>
                    <Form.Item<bannerFormType> name={"jumpType"} label="跳转类型">
                        <InputNumber style={{ width: "100%" }} />
                    </Form.Item>
                    <Form.Item<bannerFormType> name={"jumpContent"} label="跳转内容">
                        <Input />
                    </Form.Item>
                    <Form.Item<bannerFormType> name={"status"} label="状态">
                        <Radio.Group>
                            <Radio value={1}> 上架 </Radio>
                            <Radio value={2}> 下架 </Radio>
                        </Radio.Group>
                    </Form.Item>
                    <Form.Item<bannerFormType> name={"sort"} label="排序">
                        <InputNumber style={{ width: "100%" }} />
                    </Form.Item>
                    <Form.Item<bannerFormType> name={"time"} label="时间">
                        <RangePickerComponent />
                    </Form.Item>
                </Form>
            </Modal>
        </>
    )
}

export default AddOrEdit;